<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue基本操作样式3 - 变量外置</title>
    <!--1 导入vue-->
    <script src="./js/vue.global.js"></script>
</head>
<body>
    <!--2 设定html里面应用的vue区域-->
    <div id="vue_mount">
        <!--2-1 应用vue内部属性-->
        第一个信息: {{message}}<br>
        第二个信息: {{counter}}
    </div>
</body>

</html>
<script>
   // 3 定制vue的基本逻辑
   // 3-1 单独导入 createApp
   const { createApp } = Vue
   // 3-2 单独定制变量
   const my_message = "外置效果"
   const my_counter = "880"
   // 3-3 传统的定制vue内部逻辑
    const Vue_app = {
        // 3-1 定制专属的属性数据
        data() {
            return {
                // 定制两个返回的基本属性
                message: my_message,
                counter: my_counter
            }
        }
    }
    // 4 将vue_app 变量应用在vue的对象中挂载到html区域
    // app.mount('#vue_mount')
    // Vue.createApp(Vue_app).mount('#vue_mount')
    // 4-1 基于导入的createApp将变量挂载到html区域
    createApp(Vue_app).mount('#vue_mount')

</script>


